import React from 'react';
import Head from 'next/head';
import type { AppProps } from 'next/app';
import { Layout, Menu } from 'antd';
import { useRouter } from 'next/router';

import 'antd/dist/reset.css';
import '../styles/global.less';

const { Header, Content, Sider } = Layout;
function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();
  const menus = [
    {
      key: 1,
      path: '/home',
      label: '首页'
    },
    {
      key: 2,
      path: '/split',
      label: '视频分割'
    }
  ];
  const onMenuClick = (event) => {
    const menu = menus.find((item) => item.key == event.key);
    if (menu) {
      router.push(menu.path);
    }
  };
  return (
    <React.Fragment>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>vtools</title>
      </Head>
      <Layout style={{ height: '100vh' }}>
        <Sider>
          <Menu
            defaultSelectedKeys={['1']}
            mode="inline"
            theme="dark"
            style={{ minHeight: '100%' }}
            items={menus}
            onClick={onMenuClick}
          />
        </Sider>
        <Content style={{ position: 'relative' }}>
          <Component {...pageProps} />
        </Content>
      </Layout>
    </React.Fragment>
  );
}

export default MyApp;
